{extend name="common"}

{block name="content"}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>用户列表</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-form-label">
            <button type="button" id="add-client" class="layui-btn">添加用户</button>
        </div>
    </div>
</form>

<table id="deviceList" lay-filter="devTable"></table>

{/block}

{block name="template"}

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">修改权限</a>
    <a class="layui-btn layui-btn-xs" style="background: #FF5722" lay-event="del">删除</a>
</script>

{/block}

{block name="script"}
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        var thisTble = table.render({
            id: 'idList',
            elem: '#deviceList', //指定原始表格元素选择器（推荐id选择器）
            width: 756,//容器宽度
            page: true,
            even: true, //开启隔行背景
            limits: [10,20,30],
            limit: 10,
            cols: [[
                {field: 'group', title: '分组', width: 140, align: 'center'},
                {field: 'username', title: '用户名', width: 140, align: 'center'},
                {field: 'name', title: '姓名', width: 140, align: 'center'},
                {field: 'email', title: '邮箱', width: 190, align: 'center'},
                {field: 'right', title: '操作', width: 140, align: 'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
            ]],
            url: "{:url('index/User/select')}"
        });

        table.on('tool(devTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 2,
                    title: '<p style="color: #FFFFFF">客户概况</p>',
                    area: ['40%', '50%'],
                    content: "{:url('User/perm')}?name="+data.username,
                    scrollbar: false
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除该客户吗？', function(index){
                    $.ajax({
                        url: "{:url('User/delet')}",
                        type: "POST",
                        data: data,
                        dataType: 'json',
                        success: function (res) {
                            if (1 == res.code) {
                                layer.msg(res.msg, {icon: 1}, function () {
                                    location.reload();
//                                    obj.del;
                                });
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        },
                        error: function () {
                            layer.close(load);
                            layer.msg("内部错误", {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });

        $('#add-client').on('click', function () {
            layer.open({
                type: 2,
                title: '<p style="color: #FFFFFF">添加客户</p>',
                area: ['40%', '50%'],
                content: "{:url('User/add')}"
            });
        });
    });
</script>
{/block}